<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<link rel="stylesheet" href="../CSS/login_componment.css" />
		<script src="../JS/login.js"></script>
	</head>
	<body>
		<form action="" method="post">
			<div class="login-container">
				<h2>登录</h2>
				<div class="form-group">
					<label for="username">用户名:</label>
					<input type="text" id="username" name="username" onkeydown="validateInput(event)" required/>
				</div>
				<div class="form-group">
					<label for="password">密码:</label>
					<input type="password" id="password" name="password" onkeydown="validatePassword(event)" required/>
					<p>密码长度必须在8到16位之间，且只能包含字母、数字和符号。</p>
				</div>
				<div>
					<span>
						<button type="button" onclick="login()"><a href="../subtab/WebsiteManagementInterface.html">登录</a></button>
					</span>
				</div>
				<div>
					<input type="reset" value="重新登录" class="btn-login" />
				</div>
				<div>
					<button class="btn-login"><a href="../index.html" >返回上一页</a></button>
				</div>
				<div>
					<button class="btn-login"><a href="../index.html" >返回首页</a></button>
				</div>
				<div class="register-link">
					还没有账户? <a href="./register.html">注册</a>
				</div>
			</div>
		</form>
		<script>
			function login() {
				const username = document.getElementById('username').value;
				const password = document.getElementById('password').value;

				const data = {
					username: username,
					password: password
				};

				// 使用fetch API进行异步登录请求
				fetch('http://localhost:8080/api/login', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(data)
				})
						.then(response => response.json())
						.then(data => {
							if (data.code === 101) {
								alert('登录成功');
								// 这里可以添加一些登录成功后的操作，例如跳转到主页
							} else {
								alert('登录失败：' + data.message);
							}
						})
						.catch(error => {
							alert('请求失败：' + error);
						});
			}
		</script>
	</body>
</html>